<template>
    <el-dialog
        title="请选择基地"
        :visible.sync="dialogVisible"
        width="1024px"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <div style="padding: 10px; overflow-y: auto" class="theAllCard">
            <el-card
                v-for="item in base_info"
                :key="item.id"
                style="margin-bottom: 5px; width: 33%"
            >
                <!-- <el-avatar shape="square" :size="100" :src="item.picture"></el-avatar> -->
                <div
                    style="
                        display: inline-block;
                        width: 30%;
                        height: 100px;
                        align-item: center;
                    "
                >
                    <el-avatar
                        shape="square"
                        :size="120"
                        :src="basePicture"
                    ></el-avatar>
                </div>
                <el-card
                    style="display: inline-block; width: 67%; height: 120px"
                    shadow="hover"
                >
                    <el-divider content-position="left"
                        ><i style="font-weight: 900; font-size: 0.875rem;min-height:10px;min-width:10px">{{
                            item.name
                        }}</i></el-divider
                    >
                    <div style="margin-top: 40px">
                        <i style="font-weight: 500; font-size: 0.75rem"
                            >负责人：{{ item.principalName }}</i
                        >
                        <el-button
                            style="float: right"
                            size="mini"
                            plain
                            type="primary"
                            @click="selected(item)"
                            >选择</el-button
                        >
                    </div>
                </el-card>
            </el-card>
        </div>
    </el-dialog>
</template>

<script>
// API
import {
    getBaseInfo, // 获取基地信息
} from "@/api/Basic/BaseInfo";

import {
    getAllCage, // 获取基地对应的鸽棚
} from "@/api/common";

export default {
    name: "BaseChoice",

    inject: ["reload"],

    data() {
        return {
            basePicture:
                "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",

            // 基地信息请求参数
            baseInfoParam: {
                pageNum: 1,
                pageSize: 100,
            },

            // 所有基地信息
            base_info: [],

            // 选择的基地信息
            baseInfo: false,
        };
    },

    computed: {
        dialogVisible: function () {
            return this.$store.state.Switch.isShowBaseChoice;
        },
    },

    created() {
        getBaseInfo(this.baseInfoParam).then((res) => {
            // console.log('养殖数据',res);
            if (res) {
                const { records } = res.data.data;
                this.base_info = records;
            }
        });
    },

    methods: {
        selected(item) {
            // 获取基地信息
            // this.baseInfo = JSON.stringify(item)
            this.$store.commit("setBase", item);

            // 刷新页面
            this.reload();

            const params = {
                baseId: item.id,
            };

            // 获取所有鸽棚编号并存入 sessionStorage,vuex
             getAllCage(params).then(
                res => {
                    const { data } = res.data;
                    // console.log("我获取到数据了",data)
                    this.$store.commit('setAllDovecoteInfo', data)

                    if( data ) {
                        // 将鸽笼编号调整为第一个
                        this.$store.commit('setCurrentDovecote', data[0])
                    } else {
                    	const params = {
                    		dovecoteNumber: '暂无鸽棚'
                    	}
                    	this.$store.commit('setCurrentDovecote', params)
                    }
                }
            )
            this.$store.commit("closeBaseChoice");    
        },
    },
};
</script>

<style scoped>
.theAllCard {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center;
    align-items: center;
}
</style>